<template>
  <div id="work-main-map" class="main-map">
<!--    <amap-->
<!--        view-mode="3D"-->
<!--        async-->
<!--        :center.sync="center"-->
<!--        :zoom.sync="zoom"-->
<!--        :pitch.sync="pitch"-->
<!--        :rotation.sync="rotation"-->
<!--        :map-style="this.mapStyle"-->
<!--    >-->
<!--&lt;!&ndash;      缩放&ndash;&gt;-->
<!--      <amap-tool-bar-->
<!--          :position="{-->
<!--          top: '110px',-->
<!--          left: '40px',-->
<!--        }"-->
<!--      />-->
<!--      &lt;!&ndash;      指南针地图控件&ndash;&gt;-->
<!--      <amap-control-bar-->
<!--          :position="{-->
<!--          top: '10px',-->
<!--          left: '10px',-->
<!--        }"-->
<!--      />-->
<!--      &lt;!&ndash;      地图类型&ndash;&gt;-->
<!--      <amap-map-type-->
<!--          :position="{-->
<!--          top: '10px',-->
<!--          left: '10px',-->
<!--        }"-->
<!--          :showRoad="false"-->
<!--          :defaultType="0"-->
<!--      />-->
<!--      &lt;!&ndash;      比例尺&ndash;&gt;-->
<!--      <amap-scale/>-->
<!--      &lt;!&ndash;      地图标记&ndash;&gt;-->
<!--      <amap-marker-->
<!--          :position.sync="position"-->
<!--          :label="{-->
<!--          content: '测试设备一号',-->
<!--          direction: 'bottom',-->
<!--          tablename: 'datas',-->
<!--        }"-->
<!--          :icon="this.normalIcon"-->
<!--          :offset="[-25, -50]"-->
<!--          @click="gotoDetail"-->
<!--          @dblclick="gotoDetail2"-->
<!--      />-->
<!--      <amap-marker-->
<!--          ref="testMarker"-->
<!--          :position.sync="this.coverTest.position"-->
<!--          :label="{-->
<!--          content: '测试设备二号',-->
<!--          direction: 'bottom',-->
<!--        }"-->
<!--          :offset="[-25, -50]"-->
<!--          :icon="this.coverTest.icon"-->
<!--          @mouseover="changeIcon"-->
<!--          @mouseout="changeIcon"-->
<!--          @click="getTest(coverTest)"-->
<!--          @dblclick="gotoDetail2"-->
<!--      />-->

<!--&lt;!&ndash;      测试插槽，多个地图标记&ndash;&gt;-->
<!--&lt;!&ndash;      <template v-slot:map-content>&ndash;&gt;-->
<!--&lt;!&ndash;        <amap-marker&ndash;&gt;-->
<!--&lt;!&ndash;            v-for="(aoi, i) in [this.coverTest2]"&ndash;&gt;-->
<!--&lt;!&ndash;            :key="`marker-${i}`"&ndash;&gt;-->
<!--&lt;!&ndash;            :position.sync="aoi.position"&ndash;&gt;-->
<!--&lt;!&ndash;            :z-index="150"&ndash;&gt;-->
<!--&lt;!&ndash;            clickable&ndash;&gt;-->
<!--&lt;!&ndash;            @click="onMarkerClick(aoi)"&ndash;&gt;-->
<!--&lt;!&ndash;        />&ndash;&gt;-->

<!--&lt;!&ndash;        <amap-info-window&ndash;&gt;-->
<!--&lt;!&ndash;            :visible="!!activeAoi"&ndash;&gt;-->
<!--&lt;!&ndash;            :position="activeAoi ? activeAoi.position : null"&ndash;&gt;-->
<!--&lt;!&ndash;            :offset="[0, -30]"&ndash;&gt;-->
<!--&lt;!&ndash;            auto-move&ndash;&gt;-->
<!--&lt;!&ndash;            is-custom&ndash;&gt;-->
<!--&lt;!&ndash;        >&ndash;&gt;-->
<!--&lt;!&ndash;          <div class="info-window-content" v-if="activeAoi">&ndash;&gt;-->
<!--&lt;!&ndash;            <a-card shadow="always">&ndash;&gt;-->
<!--&lt;!&ndash;              <a-icon&ndash;&gt;-->
<!--&lt;!&ndash;                  type="close"&ndash;&gt;-->
<!--&lt;!&ndash;                  class="button-close"&ndash;&gt;-->
<!--&lt;!&ndash;                  @click="activeAoi = null"&ndash;&gt;-->
<!--&lt;!&ndash;              />&ndash;&gt;-->
<!--&lt;!&ndash;              <h3>该点的位置</h3>&ndash;&gt;-->
<!--&lt;!&ndash;              <div>{{ activeAoi.position[0] }}, {{ activeAoi.position[1] }}</div>&ndash;&gt;-->
<!--&lt;!&ndash;              <div>&ndash;&gt;-->
<!--&lt;!&ndash;                <a-input v-model="activeAoi.comment" placeholder="编辑备注"/>&ndash;&gt;-->
<!--&lt;!&ndash;              </div>&ndash;&gt;-->
<!--&lt;!&ndash;            </a-card>&ndash;&gt;-->
<!--&lt;!&ndash;          </div>&ndash;&gt;-->
<!--&lt;!&ndash;        </amap-info-window>&ndash;&gt;-->
<!--&lt;!&ndash;      </template>&ndash;&gt;-->
<!--    </amap>-->

    <baidu-map
        class="main-map"
        :center="{lng: 117.101, lat:39.101}"
        :zoom="16"
        :scroll-wheel-zoom="true"
        :mapStyle="mapStyle"
    >
      <bm-marker
          :position="{lng: 117.101, lat:39.101}"
          :icon="this.bIcon"
      >
        <bm-label
            content="测试设备1号"
            :labelStyle="{backgroundColor: 'rgba(0,0,0,0)', color: '#ffffff', fontSize : '12px', borderColor: 'rgba(0,0,0,0)'}"
            :offset="{width: -10, height: 50}"
        />
      </bm-marker>

      <bm-marker
          :position="{lng: 117.102, lat:39.100}"
          :icon="this.bIcon"
      >
        <bm-label
            content="测试设备2号"
            :labelStyle="{backgroundColor: 'rgba(0,0,0,0)', color: '#ffffff', fontSize : '12px', borderColor: 'rgba(0,0,0,0)'}"
            :offset="{width: -10, height: 50}"
        />
      </bm-marker>
    </baidu-map>

  </div>
</template>

<script>
import cover from '../../evntBus';
import markerIcon from '../../assets/img/井盖.gif';
import markerIcon2 from '../../assets/img/logo2.png';
import normalMarker from '../../assets/img/marker1.png'
import normalMarker2 from '../../assets/img/marker2.png'
// import loadAmap from '@amap/amap-vue'
import mapStyle from '../dashboard/workplace/mapStyle.json'


export default {
  name: "MainMap",
  data() {
    return {
      // 117.095547,39.095050
      center: [117.096008, 39.0950],
      position: [117.096008, 39.0950],
      position2: [117.096008, 39.0960],
      zoom: 17,
      pitch: 45,
      rotation: 15,
      offset: [30, 30],
      coverTest: {
        id: '123',
        tablename: 'datas2',
        center: [117.096008, 39.0950],
        position: [117.096008, 39.0960],
        zoom: 17,
        pitch: 45,
        rotation: 15,
        offset: [30, 30],
        icon: {
          image: normalMarker,
          imageSize: [50, 50],
        },
      },
      coverTest2: {
        id: '123',
        tablename: 'datas2',
        center: [117.096018, 39.0960],
        position: [117.096018, 39.0960],
        zoom: 17,
        pitch: 45,
        rotation: 15,
        offset: [30, 30],
        icon: {
          image: markerIcon,
          imageSize: [50, 50],
        },
      },
      activeAoi: 1,
      icon1: {
        image: markerIcon,
        imageSize: [50, 50],
      },
      icon2: {
        image: normalMarker,
        imageSize: [50, 50],
      },
      normalIcon: {
        image: normalMarker,
        imageSize: [50, 50]
      },
      bIcon: {
        url: normalMarker,
        size: {width: 32, height: 32},
        opts: {
          anchor: {width: 25, height: 50},
          imageSize: {width: 30, height: 32},
        }
      },
      mapStyle: {
        styleJson: mapStyle
      },
      // 百度3d地图测试项
      open: false,
      isActive: false,
      isClose: false,
      //
      markerIcon,
      markerIcon2,
      normalMarker,
      normalMarker2,
    }
  },
  computed: {},
  methods: {
    gotoDetail: function () {
      console.log(this.tablename)
      cover.$emit("sentCoverNameEvent", this.tablename)
      cover.$emit("sentCoverNameEventToAdvanceDetail", this.tablename)
      //window.location.href="#/details/advance"
    },
    gotoDetail2() {

      window.location.href = "#/details/advance"
    },
    getTest(coverTest) {
      console.log(coverTest.id)
      console.log(coverTest.tablename)
      cover.$emit("sentCoverNameEvent", coverTest.tablename)
      cover.$emit("sentCoverNameEventToAdvanceDetail", coverTest.tablename)
    },

    // 动态修改地图marker图标
    // icon.image = markerIcon不会成功，必须将整个icon修改
    changeIcon() {
      if (this.coverTest.icon.image === markerIcon) {
        this.coverTest.icon = this.icon2
      } else {
        this.coverTest.icon = this.icon1
      }
    },

    onMapClick() {
      this.activeAoi = null;
    },
    onMarkerClick(p) {
      this.activeAoi = p;
    },

  },
  mounted() {

  }
}
</script>

<style scoped>
.main-map {
  width: 752px;
  height: 560px;
  color: black;
}
</style>